<template>
  <div style="height: 600px">
    <div style="text-align: left">
      <el-button type="success" size="small" @click="addRow(users)">添加</el-button>
    </div>
    <div>
      <el-table
          :data="users"
          highlight-current-row
          v-loading="listLoading"
          @selection-change="selsChange"
          style="width: 100%"
          max-height="500"
      >
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="username" label="用户名" width="120" sortable>
        </el-table-column>
        <el-table-column prop="password" label="密码" min-width="120" sortable>
        </el-table-column>
        <el-table-column prop="userType" label="用户类型" width="120" sortable>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="120" sortable>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="180" sortable>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, users)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--新增/编辑界面-->
    <el-dialog
        :title="titleMap[dialogStatus]"
        :visible.sync="FormVisible"
        :close-on-click-modal="false"
        class="edit-form"
        :before-close="handleClose">
      <el-form
          :model="Form"
          label-width="80px"
          :rules="editFormRules"
          ref="Form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="Form.username" auto-complete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="Form.password" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" prop="user_type">
          <el-select
              v-model="Form.userType" clearable placeholder="请选择身份">
            <el-option v-for="item in option" :key="item.value"
                       :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input type="text" v-model="Form.phone" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="Form.email" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
            v-if="addBtnshow"
            type="primary"
            @click.native="confirmAdd('Form')"
        >确定</el-button>
        <el-button
            v-if="editBtnshow"
            type="primary"
            @click.native="confirmEdit('Form')"
        >确定</el-button>
        <el-button @click.native="handleCancel('Form')">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {IP} from "@/config";
import axios from "axios";
var _index;
export default {
  name: "app",
  data() {
    return {
      option :[
        {value: "学生", label: "学生",},
        {value: "教师", label: "教师",},
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      titleMap: {
        addEquipment: "新增",
        editEquipment: "编辑",
      }, //新增和编辑弹框标题
      Form: {
        id:0,
        username: "",
        price: 0,
        password: "",
        phone: "",
        email: "",
        userType:""
      },
      users: [],
      editFormRules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" },],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "请输入正确的号码格式",
            trigger: "change",
          },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
            message: "请输入正确的邮箱格式",
            trigger: "change",
          },
        ],
      },

      FormVisible: false,
      currentRow: [],
      ids: [],
      listLoading: "",
      addBtnshow: false,
      editBtnshow: false,
      editLoading: "",
      dialogStatus: "",
      selected: [],
      editid: "",
      searchForm: [],
    };
  },
  methods: {
    selsChange: function (val) {
      //点击选中
      console.log(val);
      this.selected = val;
    },
    // 点击新增
    addRow() {
      this.FormVisible = true;
      this.Form = {
        id:0,
        username: "",
        password: "",
        phone: "",
        email: "",
        userType:""
      };
      this.dialogStatus = "addEquipment";
      this.addBtnshow = true;
      this.editBtnshow = false;
    },
    // 点击确定（新增）
    confirmAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = IP + "user/edit/add"
          axios.post(url,this.Form).then(res =>{
            if(res.data.code === 0){
              this.$message({
                message: res.data.data.status,
                type: 'success'
              });
            }else
              this.$message.error(res.data.data.status);
          })
          this.$router.go(0)
          this.FormVisible = false;
        } else {
          this.$message.error('新增失败！');
          return false;
        }
      });

    },
    //点击编辑
    handleEdit: function (index, row) {
      this.FormVisible = true;
      this.Form = Object.assign({}, row); //这句是关键！！！
      _index = index;
      this.dialogStatus = "editEquipment";
      this.addBtnshow = false;
      this.editBtnshow = true;
    },
    // 点击确定（编辑）
    confirmEdit(formName) {
      var editData = _index;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = IP + "user/edit/edit"
          axios.post(url,this.Form).then(res =>{
            if(res.data.code === 0){
              this.$message({
                message: res.data.data.status,
                type: 'success'
              });
              this.users[editData].username = this.Form.username;
              this.users[editData].password = this.Form.password;
              this.users[editData].phone = this.Form.phone;
              this.users[editData].email = this.Form.email;
              this.users[editData].userType = this.Form.userType;
            }else
              this.$message.error(res.data.data.status);
          })
          this.FormVisible = false;
        } else {
          this.$message.error('修改失败！');
          return false;
        }
      });

    },
    //点击关闭dialog
    handleClose() {
      //  done();
      //  location.reload();
      this.FormVisible = false;
    },
    //点击取消
    handleCancel() {
      this.FormVisible = false;
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = IP + "user/edit/delete"
        axios.post(url,{id:row[index].id}).then(res =>{
          if(res.data.code === 0){
            this.$message({
              message: res.data.data.status,
              type: 'success'
            });
            this.users.splice(index, 1)
          }else
            this.$message.error(res.data.data.status);
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
  },
  mounted() {
    let url = IP + "user/getAll"
    axios.post(url).then(res=>{
      console.log(res)
      this.users = res.data.data.userList
    }).catch(error=>{
      console.log(error)
    })
  }
};
</script>
<style>
</style>